<template>
	<view class="extension-index"
		:style="{ backgroundImage: 'url(' + $util.img('upload/uniapp/shop_uniapp/extension/index_bg.png') + ')' }">
		<view class="show-code-c">
			<view class="show-code-box">
				<view class="invite-tit">您的邀请码</view>
				<view class="invite-code">{{invite_code}}</view>
				<view class="invite-copy" @click="$util.copy(invite_code)">复制</view>
				<view class="invite-btn" @click="openSharePopup()">邀请商家</view>
				<view class="invite-log" @click="$util.redirectTo('./store-manage')">邀请记录</view>
			</view>
		</view>
		<image class="show-code-b" :src="$util.img('/upload/uniapp/shop_uniapp/extension/index_bt.png')"
			mode="aspectFit"></image>

		<!-- 海报 -->
		<view @touchmove.prevent.stop>
			<uni-popup ref="posterPopup" type="bottom" class="poster-layer">
				<template v-if="poster != '-1'">
					<view :style="{ height: posterHeight > 0 ? posterHeight + 80 + 'px' : '' }">
						<view class="image-wrap">
							<image :src="$util.img(poster)"
								:style="{ height: posterHeight > 0 ? posterHeight + 'px' : '' }" />
						</view>
						<!-- #ifdef MP || APP-PLUS  -->
						<view class="save isPhone" @click="saveGoodsPoster()">保存图片</view>
						<!-- #endif -->
						<!-- #ifdef H5 -->
						<view class="save">长按保存图片</view>
						<!-- #endif -->
					</view>
					<view class="close iconfont iconclose" @click="closePosterPopup()"></view>
				</template>
				<view v-else class="msg">{{ posterMsg }}</view>
			</uni-popup>
		</view>

		<!-- 分享弹窗 -->
		<uni-popup ref="sharePopup" type="bottom" class="share-popup">
			<view>
				<view class="share-title">分享</view>
				<view class="share-content">
					<!-- #ifdef H5 -->
					<view class="share-box" @click="copyUrl">
						<button class="share-btn" :plain="true">
							<view class="iconfont iconfuzhilianjie"></view>
							<text>复制链接</text>
						</button>
					</view>
					<!-- #endif -->
					<!-- #ifdef MP-WEIXIN -->
					<view class="share-box" @click="copyUrl">
						<button class="share-btn" :plain="true" open-type="share">
							<view class="iconfont iconfuzhilianjie"></view>
							<text>分享给好友</text>
						</button>
					</view>
					<!-- #endif -->
					<view class="share-box" @click="openPosterPopup">
						<button class="share-btn" :plain="true">
							<view class="iconfont iconpengyouquan"></view>
							<text>生成分享海报</text>
						</button>
					</view>
				</view>
				<view class="share-footer" @click="closeSharePopup"><text>取消分享</text></view>
			</view>
		</uni-popup>
		<loading-cover ref="loadingCover"></loading-cover>
	</view>
</template>

<script>
	import {
		Weixin
	} from '@/common/js/wx-jssdk.js';
	import Config from '@/common/js/config.js';
	export default {
		data() {
			return {
				invite_code: '',
				poster: "-1", //海报
				posterMsg: "", //海报错误信息
				posterHeight: 0,
				share_url: '',
				userInfo: {}
			}
		},
		methods: {
			//获取个人信息
			getUserInfo() {
				this.$api.sendRequest({
					url: '/api/member/info',
					success: res => {
						if (res.code == 0) {
							this.userInfo = res.data;
						}
					}
				});
			},
			getShopCode() {
				this.$api.sendRequest({
					url: '/fenxiao/api/shop/getBusinessCode',
					data: {},
					success: res => {
						if (res.code == 0 && res.data) {
							this.invite_code = res.data.invite_code;
							this.share_url = res.data.share_url;
						} else {
							this.$util.showToast({
								title: res.message
							});
							setTimeout(() => {
								this.$util.redirectTo('/pages/index/index', {}, 'redirectTo');
							}, 1000);
						}
						if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
					}
				});
			},
			//-------------------------------------分享-------------------------------------
			// 打开分享弹出层
			openSharePopup() {
				this.$refs.sharePopup.open();
			},
			// 关闭分享弹出层
			closeSharePopup() {
				this.$refs.sharePopup.close();
			},
			//-------------------------------------海报-------------------------------------
			//复制链接
			copyUrl() {
				var userInfo = this.userInfo;
				let text = '【' + userInfo.nickname + '】邀您开通商户，快来看看吧。';
				let url = Config.h5Domain + '/businesscenter/invited-page?suid=' + userInfo.member_id;
				// let url = 'http://localhost:8080/h5' + '/businesscenter/invited-page?suid=' + userInfo.member_id;
				text += url;
				this.$util.copy(text, () => {
					this.closeSharePopup();
				});
			},
			// 打开海报弹出层
			openPosterPopup() {
				this.getGoodsPoster();
				this.$refs.sharePopup.close();
				this.$refs.posterPopup.open();
				if (this.poster != '-1') {
					setTimeout(() => {
						let view = uni.createSelectorQuery().in(this).select(".poster-layer .image-wrap");
						view.fields({
							size: true,
						}, data => {
							let posterWhith = data.width;
							let ratio = parseFloat((740 / posterWhith).toFixed(2));
							if (uni.getStorageSync('token')) {
								this.posterHeight = parseInt(1120 / ratio);
							} else {
								this.posterHeight = parseInt(1100 / ratio);
							}
						}).exec();
					}, 100);
				}
			},
			// 关闭海报弹出层
			closePosterPopup() {
				this.$refs.posterPopup.close();
			},
			//生成海报
			getGoodsPoster() {
				//活动海报信息
				//活动海报信息
				let qrcode_param = {
					suid: this.userInfo.member_id
				};
				this.$api.sendRequest({
					url: "/fenxiao/api/shop/poster",
					data: {
						page: '/businesscenter/invited-page',
						qrcode_param: JSON.stringify(qrcode_param)
					},
					success: res => {
						if (res.code == 0) {
							this.poster = res.data.path + "?time=" + new Date().getTime();
						} else {
							this.posterMsg = res.message;
						}
					}
				});
			},
			// #ifdef MP || APP-PLUS
			//小程序中保存海报
			saveGoodsPoster() {
				let url = this.$util.img(this.poster);
				uni.downloadFile({
					url: url,
					success: (res) => {
						if (res.statusCode === 200) {
							uni.saveImageToPhotosAlbum({
								filePath: res.tempFilePath,
								success: () => {
									this.$util.showToast({
										title: "保存成功"
									});
								},
								fail: () => {
									this.$util.showToast({
										title: "保存失败，请稍后重试"
									});
								}
							});
						}
					}
				});
			},
			// #endif

		},
		onLoad() {
			this.getShopCode();
			this.getUserInfo();
		},
		/**
		 * 自定义分享内容
		 * @param {Object} res
		 */
		onShareAppMessage(res) {
			var path = '/businesscenter/invited-page?suid=' + this.userInfo.member_id;
			return {
				title: '【' + this.userInfo.nickname + '】邀您开通商户，快来看看吧。',
				path: path,
				success: res => {},
				fail: res => {}
			};
		},
	}
</script>

<style lang="scss">
	.extension-index {
		position: relative;
		width: 750upx;
		height: 1532upx;
		background-size: 750upx 1532upx;
		background-repeat: no-repeat;
		background-position: left top;

		.show-code-c {
			position: absolute;
			width: 680upx;
			height: 648upx;
			background: #FFD4B6;
			border-radius: 20upx;
			left: 35upx;
			top: 520upx;

			.show-code-box {
				width: 610upx;
				height: 578upx;
				background: #FFFFFF;
				border-radius: 20upx;
				margin: 35upx;
				text-align: center;
				overflow: hidden;

				.invite-tit {
					height: 45upx;
					font-size: 32upx;
					color: #808080;
					line-height: 45upx;
					margin-top: 45upx;
				}

				.invite-code {
					height: 90upx;
					font-size: 64upx;
					font-family: PingFangSC-Medium, PingFang SC;
					font-weight: 500;
					color: #FF6A00;
					line-height: 90upx;
					margin-top: 16upx;
				}

				.invite-copy {
					height: 45upx;
					font-size: 32upx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #FF6A00;
					line-height: 45upx;
					margin-top: 16upx;
					text-decoration: underline;
				}

				.invite-btn {
					margin-top: 68upx;
					margin-left: 45upx;
					width: 520upx;
					height: 88upx;
					line-height: 88upx;
					background: linear-gradient(360deg, #FF3920 0%, #FFA602 100%);
					border-radius: 51upx;
					font-size: 32upx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #FFFFFF;
				}

				.invite-log {
					margin-top: 32upx;
					margin-left: 45upx;
					width: 520upx;
					height: 88upx;
					line-height: 88upx;
					border-radius: 51upx;
					border: 2px solid #FF6A00;
					font-size: 32upx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #FF6A00;
				}
			}
		}

		.show-code-b {
			position: absolute;
			top: 1232upx;
			left: 56upx;
			width: 637upx;
			height: 213upx;
		}
	}

	// 海报
	// .uni-popup__wrapper-box
	.poster-layer {
		.generate-poster {
			padding: 40rpx 0;

			.iconfont {
				font-size: 80rpx;
				color: #07c160;
				line-height: initial;
			}

			>view {
				text-align: center;

				&:last-child {
					margin-top: 20rpx;
				}
			}
		}

		.image-wrap {
			width: 70%;
			margin: 30px auto 20px auto;
			box-shadow: 0 0 16px rgba(100, 100, 100, 0.3);

			image {
				width: 100%;
				height: 100%;
				height: 750rpx;
			}
		}

		.msg {
			padding: 40rpx;
		}

		.save {
			text-align: center;
			height: 80rpx;
			line-height: 80rpx;
		}

		.close {
			position: absolute;
			top: 0;
			right: 20rpx;
			width: 40rpx;
			height: 80rpx;
			font-size: 50rpx;
		}
	}

	.share-popup,
	.uni-popup__wrapper-box {
		.share-title {
			line-height: 60rpx;
			font-size: $font-size-toolbar;
			padding: 15rpx 0;
			text-align: center;
		}

		.share-content {
			display: flex;
			display: -webkit-flex;
			-webkit-flex-wrap: wrap;
			-moz-flex-wrap: wrap;
			-ms-flex-wrap: wrap;
			-o-flex-wrap: wrap;
			flex-wrap: wrap;
			padding: 80rpx 15rpx;

			.share-box {
				flex: 1;
				text-align: center;

				.share-btn {
					margin: 0;
					padding: 0;
					border: none;
					line-height: 1;
					height: auto;

					text {
						margin-top: 20rpx;
						font-size: $font-size-tag;
						display: block;
						color: $color-title;
					}
				}

				.iconfont {
					font-size: 80rpx;
					line-height: initial;
				}

				.iconfuzhilianjie,
				.iconpengyouquan,
				.iconhaowuquan,
				.iconiconfenxianggeihaoyou {
					color: #FF6A00;
				}
			}
		}

		.share-footer {
			height: 90rpx;
			line-height: 90rpx;
			border-top: 2rpx solid $color-line;
			text-align: center;
		}

	}
</style>